<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/news.css">
    <style>
        html, body {
            background: none;
        }
        #city-view .bg {
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
        }

        #city-view .city-wrap {
            background: #fff;
            width: 100vw;
            position: fixed;
            bottom: 0;
            left: 0;
        }

        #city-view .city-wrap .li {
            line-height: 20px;
            border-bottom: 1px solid #eee;
            padding: 10px;
            font-size: 14px;
            color: #999999;
        }

        #city-view .city-wrap ul .li:last-child {
            border-bottom: 0;
        }

        #city-view .city-wrap .left {
            width: 100vw;
            overflow-y: auto;
            text-align: center;
            max-height: 50vh;
            /* border-right: 1px solid #eee; */
        }

        #city-view .city-wrap .right ul {
            width: 60vw;
            overflow-y: auto;
            height: 60vh;
        }

        #city-view .city-wrap ul .li.active {
            color: #F46CEF;
            /* font-weight: bold; */
        }

        /* #city-view .city-wrap .left .li.active {
            background: #F46CEF;
            color: #fff;
        } */

        /* 按钮 */
        #city-view .btn-wrap {
            border-bottom: 1px solid #eee;
        }

        #city-view .btn-wrap .btn {
            color: #F46CEF;
            font-size: 14px;
        }

        /* 选中的城市 */
        #city-view .select-wrap {
            position: fixed;
            bottom: 0;
            width: 100vw;
            z-index: 2;
            background: #fff;
        }

        #city-view .select-wrap .tag {
            border: 1px solid;
            color: #F46CEF;
            font-size: 12px;
            padding: 2px 10px;
            border-radius: 3px;
            margin: 10px 5px;

        }
    </style>
</head>

<body>
    <div class="wrap" id="city-view">
        <div class="bg" onclick="closeModalFrm()"></div>
        <div class="city-wrap">
            <div class="btn-wrap flex-bt new-padding-10">
                <button class="btn" onclick="closeModalFrm()">{{_i18n('取消')}}</button>
                <div class="title"></div>
                <button class="btn" onclick="frmSubmit()">{{_i18n('确定')}}</button>
            </div>
            <div class="flex" style="padding-bottom:50px;">
                <ul class="left">
                    <li class="li" v-for="(m, index) in proList" @click="selectPro(index, $event)">{{m.name}}</li>
                    <!-- <li class="li">1</li> -->
                </ul>
            </div>
            <div class="select-wrap">
                <span class="tag" v-for="(m, index) in selectCity">{{m}}</span>
                <!-- <span class="tag">广州</span>
                <span class="tag">广州</span>
                <span class="tag">广州</span> -->
            </div>
        </div>
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/ffkj.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/select_json.js"></script>
<script src="../../script/vue.js"></script>
<script>
    var cityLen = 1;
    var ziduan = '';
    var cityView = new Vue({
        el: '#city-view',
        data: {
            proList: [],
            selectCity: [],
        },
        methods: {
            selectPro(index, event) {
                var _this = this;
                var e = event.currentTarget;
                var $this = $(e);
                $this.toggleClass('active');
                var cls = $this.hasClass('active');
                var text = $this.text();
                if (cls) {
                    _this.selectCity.push(text);
                } else {
                    for (var i = 0, len = _this.selectCity.length; i < len; i++) {
                        if (text == _this.selectCity[i]) {
                            _this.selectCity.splice(i, 1);
                            return;
                        }
                    }
                }

            }
        }
    })

    apiready = function () {
        $api.fixTabBar($api.dom('.select-wrap'));
        ziduan = api.pageParam['ziduan'];
        cityLen = api.pageParam['len'] || 1;
        $('.title').text(api.pageParam['title']);
        cityView.proList = _paramObj[ziduan];
        getProgram(function(arr){
            if(ziduan == 'dy_program'){
                cityView.proList = arr;
            }
        })
        getConditions(function(arr){
            if(ziduan == 'dy_conditions'){
                cityView.proList = arr;
            }
        })
       
    }

    function frmSubmit() {
        var str = cityView.selectCity.join(',');

        var fn = api.pageParam['fn'];
        var callback = 'newChange("' + fn + '", "' + str + '")';
        var winName = api.pageParam['winName'];
        var frameName = api.pageParam['frameName'];
        if (!winName) {
            winName = frameName;
        }
        api.execScript({
            name: winName,
            frameName: frameName,
            script: callback
        })
        closeModalFrm();
    }

    function closeModalFrm() {
        api.closeFrame();
    }
</script>

</html>